<template>
  <div style="margin-top: 20px;">
    <a-table
      bordered
      class="ant-table-striped"
      size="middle"
      :columns="columns"
      :data-source="data"
      :locale="{emptyText: '暂无数据'}"
      :row-selection="{onChange: changeHandler}"
      :pagination="{total, current: pagination.pageIndex, pageSize: pagination.pageSize}"
      :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"
      @change="paginationChange"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'index'">
          {{ index + 1 }}
        </template>
        <slot name="bodyCell" :column="column" :record="record" :index="index"></slot>
        <template v-if="column.dataIndex === 'opera'">
          <a-button @click="edit(record._id)" type="primary" style="margin-right: 20px;">编辑</a-button>
          <a-button @click="del(record._id)" type="primary" danger>删除</a-button>
        </template>
      </template>
    </a-table>
  </div>
</template>
<script setup>

const props = defineProps(['columns', 'data', 'pagination', 'total', 'page', 'idx'])
const emit = defineEmits(['changeHandler', 'lookHandler', 'update:page', 'update:idx', 'edit', 'del'])

const edit = (id) => {
  emit('edit', 'edit', id)
}

const del = (id) => {
  emit('del', id)
}

// 选中项
const changeHandler = (selectedRowKeys) => {
  emit('update:idx', selectedRowKeys)
}

// 
const paginationChange = (pagination) => {
  emit('update:page', pagination.current)
}


</script>
<style scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #fafafa;
}
[data-doc-theme='dark'] .ant-table-striped :deep(.table-striped) td {
  background-color: rgb(29, 29, 29);
}

/* a,
a:link,
a:visited,
a:hover,
a:active {
  color: #047466;
} */
</style>